<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的发布 - 农业服务平台</title>
    
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="../favicon.ico">
    <link rel="icon" type="image/png" href="../images/logo.png">
    
    <script src="../js/tailwindcss-3.4.17.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#10b981',
                        'primary-dark': '#059669',
                        secondary: '#06b6d4',
                        accent: '#f59e0b',
                        danger: '#ef4444',
                        neutral: '#f9fafb',
                        'text-primary': '#1f2937',
                        'text-secondary': '#6b7280'
                    }
                }
            }
        }
    </script>
    <link rel="stylesheet" href="../css/all.min.css">
    <link rel="stylesheet" href="../css/common.css">
</head>
<body class="bg-neutral">
    <div class="container-app">
        <!-- 顶部导航 -->
        <header class="glass-effect sticky top-0 z-10 border-b border-gray-100">
            <div class="px-4 py-3 flex items-center gap-3">
                <button onclick="window.history.back()" class="w-8 h-8 rounded-lg hover:bg-gray-100 flex items-center justify-center transition-colors">
                    <i class="fa fa-arrow-left"></i>
                </button>
                <h1 class="text-base font-bold flex-1">我的发布</h1>
            </div>
            
            <!-- Tab切换 -->
            <div class="flex border-b border-gray-200">
                <button id="tab-demands" onclick="switchTab('demands')" class="flex-1 py-3 text-sm font-medium text-primary border-b-2 border-primary">
                    我的需求
                </button>
                <button id="tab-services" onclick="switchTab('services')" class="flex-1 py-3 text-sm font-medium text-text-secondary">
                    我的服务
                </button>
            </div>
        </header>
        
        <main class="px-4 py-3 pb-20">
            <!-- 我的需求列表 -->
            <div id="demands-list" class="space-y-3">
                <div class="text-center py-12">
                    <i class="fa fa-spinner fa-spin text-3xl text-gray-300 mb-3"></i>
                    <p class="text-sm text-text-secondary">加载中...</p>
                </div>
            </div>
            
            <!-- 我的服务列表 -->
            <div id="services-list" class="space-y-3 hidden">
                <div class="text-center py-12">
                    <i class="fa fa-inbox text-3xl text-gray-300 mb-3"></i>
                    <p class="text-sm text-text-secondary">暂无发布的服务</p>
                    <button onclick="window.location.href='publish-service.html'" class="mt-4 px-6 py-2 bg-primary text-white rounded-lg text-sm hover:bg-primary-dark transition-colors">
                        发布服务
                    </button>
                </div>
            </div>
        </main>
        
        <div id="bottom-nav"></div>
        <div id="publish-modal-container"></div>
    </div>
    
    <script src="../js/common.js"></script>
    <script src="../js/navigation.js"></script>
    <script src="../js/components.js"></script>
    <script src="../js/animate.js"></script>
    <script>
        let currentTab = 'demands';
        
        // Tab切换
        function switchTab(tab) {
            currentTab = tab;
            
            // 更新Tab样式
            document.getElementById('tab-demands').className = tab === 'demands' 
                ? 'flex-1 py-3 text-sm font-medium text-primary border-b-2 border-primary'
                : 'flex-1 py-3 text-sm font-medium text-text-secondary';
            
            document.getElementById('tab-services').className = tab === 'services'
                ? 'flex-1 py-3 text-sm font-medium text-primary border-b-2 border-primary'
                : 'flex-1 py-3 text-sm font-medium text-text-secondary';
            
            // 切换列表显示
            document.getElementById('demands-list').classList.toggle('hidden', tab !== 'demands');
            document.getElementById('services-list').classList.toggle('hidden', tab !== 'services');
            
            // 加载对应数据
            if (tab === 'demands') {
                loadMyDemands();
            } else {
                loadMyServices();
            }
        }
        
        // 加载我的需求列表
        async function loadMyDemands() {
            const container = document.getElementById('demands-list');
            
            try {
                // 检查登录状态
                if (!CommonUtils.isLoggedIn()) {
                    container.innerHTML = `
                        <div class="text-center py-12">
                            <i class="fa fa-user-slash text-3xl text-gray-300 mb-3"></i>
                            <p class="text-sm text-text-secondary mb-4">请先登录</p>
                            <button onclick="window.location.href='login.html'" class="px-6 py-2 bg-primary text-white rounded-lg text-sm hover:bg-primary-dark transition-colors">
                                立即登录
                            </button>
                        </div>
                    `;
                    return;
                }
                
                // 调用API获取需求列表（这里需要添加用户过滤参数）
                const result = await CommonUtils.getDemandsAPI({ pageSize: 50 });
                
                if (result.code === 200 && result.data && result.data.rows && result.data.rows.length > 0) {
                    renderDemandsList(result.data.rows);
                } else {
                    container.innerHTML = `
                        <div class="text-center py-12">
                            <i class="fa fa-inbox text-3xl text-gray-300 mb-3"></i>
                            <p class="text-sm text-text-secondary mb-4">还没有发布需求</p>
                            <button onclick="window.location.href='publish-demand.html'" class="px-6 py-2 bg-primary text-white rounded-lg text-sm hover:bg-primary-dark transition-colors">
                                发布需求
                            </button>
                        </div>
                    `;
                }
            } catch (error) {
                console.error('加载需求列表失败:', error);
                container.innerHTML = `
                    <div class="text-center py-12">
                        <i class="fa fa-exclamation-triangle text-3xl text-danger mb-3"></i>
                        <p class="text-sm text-text-secondary mb-4">加载失败，请重试</p>
                        <button onclick="loadMyDemands()" class="px-6 py-2 bg-primary text-white rounded-lg text-sm hover:bg-primary-dark transition-colors">
                            重新加载
                        </button>
                    </div>
                `;
            }
        }
        
        // 渲染需求列表
        function renderDemandsList(demands) {
            const container = document.getElementById('demands-list');
            const statusMap = {
                0: { text: '已发布', class: 'bg-green-100 text-green-600' },
                1: { text: '待审核', class: 'bg-yellow-100 text-yellow-600' },
                2: { text: '已下架', class: 'bg-gray-100 text-gray-600' },
                3: { text: '已完成', class: 'bg-blue-100 text-blue-600' },
                4: { text: '已取消', class: 'bg-red-100 text-red-600' }
            };
            
            container.innerHTML = demands.map(demand => {
                const status = statusMap[demand.status] || { text: '未知', class: 'bg-gray-100 text-gray-600' };
                
                return `
                    <div class="card-modern p-4 hover:shadow-lg transition-shadow cursor-pointer" onclick="window.location.href='demand-detail.html?id=${demand.id}'">
                        <div class="flex items-start justify-between mb-2">
                            <h3 class="text-sm font-bold text-text-primary flex-1 line-clamp-1">${demand.title || demand.demandName || '未命名需求'}</h3>
                            <span class="px-2 py-1 rounded text-xs ${status.class} ml-2 whitespace-nowrap">${status.text}</span>
                        </div>
                        
                        <p class="text-xs text-text-secondary mb-3 line-clamp-2">${demand.intro || demand.demandIntro || ''}</p>
                        
                        <div class="flex items-center justify-between text-xs text-text-secondary">
                            <div class="flex items-center gap-3">
                                <span><i class="fa fa-map-marker-alt mr-1"></i>${demand.location || demand.demandLocation || '-'}</span>
                                <span><i class="fa fa-eye mr-1"></i>${demand.viewCount || demand.views || 0}</span>
                            </div>
                            <span>${formatDate(demand.createTime)}</span>
                        </div>
                    </div>
                `;
            }).join('');
        }
        
        // 加载我的服务列表
        function loadMyServices() {
            // TODO: 实现服务列表加载
            const container = document.getElementById('services-list');
            container.innerHTML = `
                <div class="text-center py-12">
                    <i class="fa fa-inbox text-3xl text-gray-300 mb-3"></i>
                    <p class="text-sm text-text-secondary mb-4">还没有发布服务</p>
                    <button onclick="window.location.href='publish-service.html'" class="px-6 py-2 bg-primary text-white rounded-lg text-sm hover:bg-primary-dark transition-colors">
                        发布服务
                    </button>
                </div>
            `;
        }
        
        // 格式化日期
        function formatDate(dateString) {
            if (!dateString) return '-';
            const date = new Date(dateString);
            const now = new Date();
            const diff = now - date;
            
            if (diff < 60000) return '刚刚';
            if (diff < 3600000) return Math.floor(diff / 60000) + '分钟前';
            if (diff < 86400000) return Math.floor(diff / 3600000) + '小时前';
            if (diff < 604800000) return Math.floor(diff / 86400000) + '天前';
            
            return date.toLocaleDateString('zh-CN');
        }
        
        // 页面初始化
        document.addEventListener('DOMContentLoaded', () => {
            CommonUtils.initToken();
            Components.initComponents('');
            
            // 检查URL参数，决定显示哪个Tab
            const urlParams = new URLSearchParams(window.location.search);
            const tab = urlParams.get('tab') || 'demands';
            switchTab(tab);
        });
    </script>
</body>
</html>
